<template>
    <div class="banner">
        <div class="banner-card">
            <Row :gutter="20">
                <Col>
                    <Form ref="formArticleData" :model="formArticleData" :label-width="80">
                        <FormItem label="标题" prop="name">
                            <Input v-model="formArticleData.name" placeholder="请输入标题"></Input>
                        </FormItem>
                        <FormItem label="奖励数量" prop="title">
                            <Input v-model="formArticleData.num" placeholder="请输入奖励数量"></Input>
                        </FormItem>
                        <FormItem label="分类" prop="currency_id">
                            <Select v-model="formArticleData.currency_id" placeholder="请选择分类">
                                <Option :value="item.id" v-for="item in type">{{ item.name }}</Option>
                                <!--<Option value="4">美容项目</Option>-->
                            </Select>
                        </FormItem>
                        <Col span="10" class="magi" style="margin: 0 30px">
                            <Card>
                                <p slot="title">
                                    <Icon type="ios-film-outline"></Icon>
                                    图片上传
                                </p>
                                <Upload accept="image/png, image/jpeg, image/gif, image/jpg" type="drag" action="?"
                                        :before-upload="handleBeforeUpload">
                                    <div class="upImg">
                                        <a>
                                            <Icon type="ios-cloud-upload" size="52"></Icon>
                                        </a>
                                        <p>点击或将图片拖拽到这里上传</p>
                                    </div>
                                </Upload>
                            </Card>
                        </Col>
                        <Col span="10">
                            <Card>
                                <p slot="title">
                                    <Icon type="ios-film-outline"></Icon>
                                    图片预览
                                </p>
                                <div class="imgYulan">
                                    <img v-if="timeImg!=''" :src="timeImg"/>
                                    <a v-else style="text-align: center;font-weight: 500;font-size: 20px;text-align: center;line-height: 368px;display: block">暂无图片</a>
                                </div>
                            </Card>
                        </Col>
                    </Form>
                </Col>
            </Row>
            <!--<Input style="margin-top: 40px" v-model="value8" type="textarea" :autosize="{minRows: 3,maxRows: 5}" placeholder="请输入图片链接文字" />-->
            <Button style="margin: 30px auto 10px auto;display: block;width: 100px" type="primary" :loading="loading" @click="tijiao">提交</Button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "banner",
        data() {
            return {
                timeImg: "",
                upimgUrl: "",
                value8:"",//
                loading:false,
                id:"",
                formArticleData:{
                    name:"",
                    type:"",
                    currency_id:'',
                    src:'',
                    // font:"",
                    num:"",
                    upimgUrl:"",
                },
                type:[]
            }
        },
        mounted(){
            if(this.$route.query.id){
                this.init()
                this.ins()
            }else {
                this.init()
            }

        },
        methods: {
            ins(){
                this.getJsonData(`table/find_table`,{id:this.$route.query.id})
                    .then((res)=>{
                        this.formArticleData=res.result
                        this.timeImg = this.imgHttpUrl+res.result.src
                        this.formArticleData.upimgUrl = res.result.src
                    });
            },
            init(){
                this.getJsonData(`table/qeury_currency`)
                    .then((res)=>{
                        this.type=res.result
                    });
            },
            //上传之前的操作
            handleBeforeUpload(file) {
                if ((Math.round(file.size / 1024 * 100) / 100) < 2000) {
                    this.caijianImg(file)
                } else {
                    this.$Notice.error({
                        title: '文件过大',
                        desc: '文件 ' + file.name + '/' + (Math.round(file.size / 1024 * 100) / 100) + 'KB' + '，请上传 2M 以内的图片。',
                        duration: 4.5
                    });
                }
                //禁止默认上传
                return false
            },
            caijianImg(file) {
                let reader = new FileReader();
                reader.onload = () => {
                    this.timeImg = reader.result
                    this.upimgUrl = reader.result
                    this.upImg(reader.result)
                    reader.onload = null;
                };
                reader.readAsDataURL(file);
            },
            upImg(image){
                this.upBaseImg("User/uploadPic",{image})
                    .then((res) =>{
                        this.formArticleData.upimgUrl= res.url
                        console.log(res)
                        // tinymce.get('tinymceEditer').setContent(tinymce.get('tinymceEditer').getBody().innerHTML+`<img src='${this.imgHttpUrl + res.url}'/>`)
                    })
            },
            tijiao(){
                //save_table
                console.log(this.formArticleData.currency_id)
                if (this.$route.query.id){
                    this.getJsonData(`table/save_table`,{
                        id:this.$route.query.id,
                        name:this.formArticleData.name,
                        src:this.formArticleData.upimgUrl,
                        currency_id:this.formArticleData.currency_id,
                        num:this.formArticleData.num,
                    })
                        .then((res)=>{
                            this.$Message.success(res.msg);
                            this.$router.push({name:'bannerLL'})
                        });
                }else {
                    this.getJsonData(`table/add_table`,{
                        name:this.formArticleData.name,
                        src:this.formArticleData.upimgUrl,
                        currency_id:this.formArticleData.currency_id,
                        num:this.formArticleData.num,
                    })
                        .then((res)=>{
                            this.$Message.success(res.msg);
                            this.$router.push({name:'bannerLL'})
                        });
                }
            }
        }
    }
</script>

<style scoped lang="less">
    @import "banner";
</style>